<template>
  <div class="liv-index">
    <livheade :logo="logo2"></livheade>
    <!-- 登录链接banner-->
    <div class="index-login">
      <img src="../assets/index/banner_1.png" style="display: block" />
      <!--<router-link class="index-bott-login" to="bespoke" tag="div">
        <img class="login-cli" src="../assets/index/banner.png" />
      </router-link>-->
    </div>
    <!--登录-->
    <loginview> </loginview>
    <!-- 懂儿童-->
    <div class="index-children">
      <h2>懂儿童教育才能提供更好的在线外教课程</h2>
      <p>LiveThree在线直播外教课由深耕线下素质教育8年,</p>
      <p>累计培养数万名孩子的创世纪教育集团潜心研发推出</p>
      <img src="../assets/index/pic2.png"/>
    </div>
    <!--了解更多-->
    <div class="index-aboutWe">
        <div v-for="(about, index) in abouts" :key="index">
          <h3>{{about.title}}</h3>
          <p>{{about.content}}</p>
        </div>
      <a class="about-link" href="http://www.hkgie.com/giedu.aspx">了解更多</a>
    </div>
    <!--为什么-->
    <div class="index-why">
      <h2>为什么要到LiveThree学习</h2>
      <div v-for="(why, index) in wys" :key="index">
        <h3>{{why.title}}</h3>
        <p>{{why.content}}</p>
      </div>
    </div>
    <!--video-->
    <div class="index-video" v-if="false">
      <video></video>
    </div>
    <!--联合国际-->
    <div class="index-country">
      <h2>联合国际知名教育专家团队定制研发</h2>
      <div v-for="(team, index) in teams" :key="index">
        <img :src="team.img"/>
        <h3>{{team.title}}</h3>
        <p>{{team.content}}</p>
      </div>
    </div>
    <!-- 设备工具-->
    <div class="index-tool">
      <h2>设备要求</h2>
      <div v-for="(tool, index) in tools" :key="index">
        <img :src="tool.img"/>
        <h3>{{tool.title}}</h3>
      </div>
    </div>
    <!--提示-->
    <div class="index-cue">
      <dl>
        <dt>温馨提示</dt>
        <dd>1 建议使用电脑及头戴式耳麦，上课体验更精彩</dd>
        <dd>2 在正式开课前，我们的客服会致电为你进行设备检查，为保证精彩的课程体验，请协助完成设备检测</dd>
        <dd>3 如果上课时间为网络使用高峰期，建议暂停家庭其他网络使用来保证课程体验</dd>
      </dl>
    </div>
    <!--服务-->
    <div class="index-serve">
      <h2>服务流程</h2>
      <div v-for="(serve, index) in serves" :key="index" >
        <div>
          <span>0{{index+1}}</span>
          <img :src="serve.img"/>
        </div>
        <h3>{{serve.title}}</h3>
        <p  v-html="serve.content"></p>
        <router-link v-if="serve.istab" to="bespoke">立即领取</router-link>
      </div>
    </div>
    <!--承诺-->
    <div class="index-promise">
      <h2>我们的承诺</h2>
      <div class="promise-body">
        <div v-for="(promise, index) in promises" :key="index" >
          <img :src="promise.img"/>
          <p>{{promise.content}}</p>
        </div>
      </div>
    </div>
    <!-- 我们的承诺-->
    <!--<div class="index-honor" >-->
      <!--<h2>我们的荣誉</h2>-->
      <!--<div class="honor-body">-->
          <!--<img :src="honor" v-for="(honor, index) in honors" :key="index"/>-->
        <!--</div>-->
    <!--</div>-->
  <!-- 登录-->
    <router-link class="index-bott-login" to="bespoke" tag="div">
      <img class="login-cli" src="../assets/index/banner.png" />
    </router-link>
    <!-- 底部-->
    <div class="index-bottom">
      <img   src="../assets/index/logo_2.png"/>
      <router-link to="privacy" tag="p">
        隐私政策
      </router-link>
      <p>蜀ICP备17040054号-1</p>
    </div>
  </div>
</template>

<script>
  import livheade from '@/components/header/heade'
  import loginview from '@/components/login'

  import melinda from '@/assets/index/avator_1.png'
  import karen from '@/assets/index/avator_2.png'
  import andrew from '@/assets/index/avator_3.png'
  import victoria from '@/assets/index/avator_4.png'
  import pang from '@/assets/index/avator_5.png'

  import tool1 from '@/assets/index/equipment_1.png'
  import tool2 from '@/assets/index/equipment_2.png'
  import tool3 from '@/assets/index/equipment_3.png'

  import serve1 from '@/assets/index/service_1.png'
  import serve3 from '@/assets/index/service_3.png'
  import serve2 from '@/assets/index/663.png'

  import cmt1 from '@/assets/index/cmt_1.png'
  import cmt2 from '@/assets/index/cmt_2.png'
  import cmt3 from '@/assets/index/cmt_3.png'

  export default {
    name: 'index',
    data () {
      return {
        logo2: true,
        abouts: [
          {title: '创世纪简介 /Introduction', to: {}, content: '创世纪国际教育是一家致力于引进和整合各项先进的国际化教育资源，希望让中国家庭享受到优质国际化素质教育资源的平台'},
          {title: '企业愿景 /Vision', to: {}, content: '通过完善对国际化素质教育体系，创建一所让更多家庭受益的伟大学习'},
          {title: '企业使命 /Mission', to: {}, content: '成为中国具有潜力上市的素质教育企业'}
        ],
        wys: [
          {title: '100%欧美外教 地道外语周周聊', to: {}, content: '七大流程严格筛选和考核每一位外教，从根本上保证教学质量。外教通过率仅为8%，每一位外教都必须通过严格的教师培训并精通针对中国儿童的教育技巧。'},
          {title: '1+3固定小班教学 快乐学习进步大', to: {}, content: '1名稳定外教，不再难约课，外教更加了解学员，可提供更适合的学习方法。3个小伙伴一起学，消除怯场，增加良性竞争，学习过程更快乐，学习进步跟快速。'},
          {title: '25分钟科学学时', to: {}, content: '科学研究表明：少儿注意力稳定周期为25分钟，让小朋友在精力专注的时间上课，每一分钟都是大收获。'},
          {title: '线上线下相结合 英语学习更科学', to: {}, content: '线上学习知识，线下锻炼实践运用，二维一体，合二为一，有效提高英语综合能力，让英语真正发挥其工具作用。'}
        ],
        teams: [
          {img: melinda, title: 'Melinda Lily Thompson', content: 'Genius English（天才英语）教材主编，国际知名英语教学专家，曾是迪士尼英语创始人之一，迪士尼英语教材主编，从事出版行业已有30余年，她的专注领域为青少年学生的英语教育和语言发展，曾获得AEP Whole Curriculum Development ELL Distinguished Achievement Award 等10项国际大奖。'},
          {img: karen, title: 'Karen Price博士', content: '第二语言学习大师，原哈佛大学研究生教育学院教授，ESL课程研究和开发副主任。再教育科技领域获奖无数，曾获得Apple Classroom Of Tomorrow 奖。'},
          {img: andrew, title: 'Andrew Shewbart', content: '曾任迪士尼英语首位英语教学总监，哥伦比亚大学师范学院TEFL-C模式作者，CCTV英语益智类节目总顾问，从教20年，他非常了解中国孩子英语学习的特点，并将此经验运用到LiveThree课程研发和产品设计中'},
          {img: victoria, title: 'Victoria Saxon博士', content: '教育心理学博士，国际知名儿童图书馆作家，拥有二十多年出版经验，数百本作品享誉国际，其中几十本荣登畅销榜冠军。'},
          {img: pang, title: '潘鹏凯 博士', content: '国际著名的少儿教育专家，美国麻省理工博士'}
        ],
        tools: [
          {img: tool1, title: '台式电脑+摄像头+头戴式耳麦'},
          {img: tool2, title: '笔记本电脑（内置或外接摄像头）+头戴式耳麦'},
          {img: tool3, title: '平板电脑或Andriod、IOS智能手机'}
        ],
        serves: [
          {img: serve1, istab: true, to: {}, title: '免费注册领取精彩在线直播外教体验课', content: '注册后我们将尽快联系你们'},
          {img: serve2, title: '为你安排体验课', content: '在提交预约信息后，我们会尽快联系你确定体验课程的细节'},
          {img: serve3, title: '开始体验课', content: '专业技术团队为你提供设备检测或者自测技术支持<br/>地道欧美外教为你的宝贝带来精彩英语实践运用课程体验<br/>外教根据孩子课堂表现给出专业评价和优化建议'}
        ],
        promises: [
          {img: cmt1, content: '100%严格挑选欧美外教，通过率仅为8%，根本上保障师资力量'},
          {img: cmt2, content: '我们将全程为你提供及时专业体贴的服务，多重保障更放心'},
          {img: cmt3, content: '我们将用最高的保密原则对你和孩子的所有信息进行保密'}
        ],
        honors: [
          tool1, tool1, tool1, tool1
        ]
      }
    },
    components: {livheade, loginview}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"  rel="stylesheet/scss">
  //import '@/LJ/style/base'
  $paddinglr:0 12px;
  $paddinglrf:0 px;
  .liv-index {
    p {
      text-align: left;
      font: {
        size: 11px;
        color: #666666;
      }
    }
    h2 {
      font: {
        size: 17px;
        color: #40444c;
        weight: bold;
      }
    }
    h3{
      text-align: left;
      font: {
        size:14px;
        color:#40444c;
        weight: bold;
      };
    }
    /*<!-- 登录链接banner-->*/
    .index-login {
      position: relative;
      margin: $paddinglrf;
      position: relative;
      height: max-content;
      .login-cli {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
    /*<!-- 懂儿童-->*/
    .index-children {
      padding:51px 0 19px;
      h2 {
        padding-bottom: 12px;
      }
      img{
        padding:15px 0 19px;
      }
      p{
        text-align:center;
      }
    }
    /* 了解更多*/
    .index-aboutWe{
      margin: 0 12px;
      height: 315px;
      padding: 4px 13px 0;
      background-color: #f3f6fa;
      h3{
        text-align: left;
      }
      p{
        text-align: left;
        font: {
          size: 11px;
          color:#666666;
        };
      }
      div {
        padding-top:22px;
      }
      .about-link{
        display: inline-block;
        width: 250px;
        height: 42px;
        line-height: 42px;
        margin-top: 43px;
        border:1px solid #48cbf7;
        border-radius: 2px;
        font: {
          size:16px;
          color:#48cbf7;
        };
      }
    }
    /*为什么*/
    .index-why{
      margin: 0 12px;
      h2{
        padding:45px 0 28px;
      }
      div{

        h3{
          padding-left: 29px !important;
          padding:11px 0;
          background: url("../assets/index/yuandian.png") left no-repeat ;
          background-size:15px 15px;
        }
        p{
          padding-left: 29px;
        };
      }
    }
    /*video*/
    .index-video{
      margin-top: 43px;
      padding: 39px 0;
      background-image: url("../assets/index/bg4.png");
      video {
        height: 187px;
        width: 350px;
        /*border:1px solid red;*/
      }
    }
    /*团队*/
    .index-country {
      margin: 0 12px;
      h2{
        margin: 50px 0 6.5px;
      }
      div{
        /*height:159px;*/
        position:relative;
        background-color:#f3f4f9;
        margin:67.5px 0 0;
        padding: 0px 0 20px;
        img{
          width: 59px;
          height: 59px;
          position: absolute;
          margin: -29.5px 0 0 -29.5px;
        }
        h3 {
          padding: 59.5px 0 10px;
          text-align: center;
        }
        p {
          padding: 0 12px;
        }
      }
    }
    /*设备*/
    .index-tool{
      margin: 40px 0 0;
      div {
        margin: 21px 0 0;
        img {
          width: 127px;
          height: 52px;
          margin: 10px 0;
        }
        h3 {
          text-align: center;
        }
      }
    }
    /*提示*/
    .index-cue{
      display: flex;
      flex-flow: column;
      justify-content: center;
      background-color:#497ac5;
      height: 140px;
      padding: 0 10px;
      margin: 31px 12px 0;
      border-radius:10px;
      text-align:left;
      font-size:11px;
      color:#ffffff;
      dl{
        dt{
            font-size:13px;
        }
        dd{}
      }
    }
    /*服务*/
    .index-serve {
      margin: 0 12px;
      $marginrig: 10px;
      h3 {
        margin: 12px 0 0;
      }
      h2 {
        padding: 45px 0 41px;
      }
      p{
        margin: 12px $marginrig 17px;
      }
      span {
        height: 129.5px;
        line-height: 222px;
      }
      &>div {
        margin: 20px 0 0;
      }
      &>div:nth-child(odd) {
        img {
          order: -1 ;
        }
        text-align: right;
        p, span, h3,a {
          text-align: right;
        }
      }
      &>div:nth-child(even) {
        text-align: left;
      }
      div {
        /*border: 1px solid red;*/
        div{
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          span {
            font-size: 40px;
            color: #e7e9ee;
          }
          img {
            width:202.5px;
            height:129.5px;
          }
        }
        a{
          text-align: center !important;
          display: inline-block;
          width: 107px;
          height: 28px;
          line-height: 28px;
          color: #48cbf7;
          border-radius:4px;
          border:1px solid #48cbf7;
          margin: 0 $marginrig 11px;
        }
      }
    }
    /*承诺*/
    .index-promise {
      margin: 0 12px;
      padding: 40px 0;
      .promise-body {
        display:flex;
        flex-flow: row nowarp;
        justify-content: space-between;
        div {
          width: 106px;
          img {
            padding: 14px;
          }
          p {
            text-align: center;
          }
        }
      }
    }
    /*荣誉*/
    .index-honor {
      h2 {
        margin: 49px 0 42px 0;
      }
      .honor-body {
        &::-webkit-scrollbar {display:none}
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
        overflow-x: overlay;
/*
        margin:0 px;
*/
        /*img:nth-child(1){*/
          /*margin: 0 0 0 11px;*/
        /*}*/
        img {
          &:nth-child(1){
            margin: 0 11px 0 12px;
          }
          width: 157.5px;
          height: 101px;
          margin: 0 11px 0 0;
        }
      }

    }
    /* 底部登录*/
    .index-bott-login {
      margin: 47px 0px 24px
    }
    /*底部*/
    .index-bottom{
      margin:0 0px;
      background-color: #4a4a4a;
      img {
        width: 174px;
        height: 29px;
        margin: 15px 0 7px;
      }
      p {
        color: #ffffff;
        text-align: center;
      }
      p:last-child {
        margin: 53px 0 0;
        padding-bottom: 14px;
      }
    }
  }
</style>
